<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../static/public/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/mycss.css">
    <script src="../../static/public/layui/layui.js"></script>
</head>
<body>
    <div class="client-container">
        <table id="books" lay-filter="test"></table>
        <div class="layui-btn-group" id="btnAddAndDel" style="display: none">
            <button type="button" class="layui-btn center" lay-event="add">还书</button>
        </div>
    </div>

<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#books'
            // ,height: 312
            ,url: 'books.json' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', align: 'center', width:80, sort: true, fixed: 'left'}
                ,{field: 'bookName', align: 'center', title: '书名'}
                ,{field: 'publisher', align: 'center', title: '出版社', sort: true}
                ,{field: 'publisherDate', align: 'center', title: '编辑时间'}
                ,{field: 'toolbar', title: '操作', align: 'center', toolbar: '#btnAddAndDel'}
            ]]
        });

    });
</script>
</body>
</html>